require('normalize.css/normalize.css');
require('styles/App.scss');

import React from 'react';
import ReactDOM from 'react-dom';

let imageDataArr = require('../imageData/imagesData.json');
let imageData = (function(){
        for(let i = 0; i < imageDataArr.length; i++){
            let singeImage = imageDataArr[i];
            singeImage.fileUrl = require('../images/' + singeImage.fileName);
            imageDataArr[i] = singeImage;
        }
        return imageDataArr;
})(imageDataArr);



class ImgFigure extends React.Component {
    constructor(props){
        super(props)
        
    };
    /*
    * 操作图片翻转函数
    * */
    handleImg(e) {
        if (this.props.arrange.isCenter){
            this.props.inserver();
        } else {
            this.props.center();
        }

        e.stopPropagation();
        e.preventDefault();
    }
    render() {
         var styleObj = {};
         if (this.props.arrange.pos){
                styleObj = this.props.arrange.pos;
         }
         if (this.props.arrange.rotate){
             ['Webkit', 'Moz', 'Ms', ''].forEach(function(value){
                 styleObj[value + 'transform'] = 'rotate(' + this.props.arrange.rotate + 'deg)';
             }.bind(this));

         }
         if (this.props.arrange.isCenter){
             styleObj.zIndex = 11;
         }
         var  imgFigureClass = 'img-figure';
              imgFigureClass += !this.props.arrange.isInverse ? '' : ' is-inverse';
        return (
            <figure className={imgFigureClass} style={styleObj} onClick={this.handleImg.bind(this)}>
                <img src={this.props.data.fileUrl} alt={this.props.data.title} />
                <figcaption>
                    <h2>{this.props.data.desc}</h2>
                </figcaption>
                <div className="img-back" onClick={this.handleImg.bind(this)}>
                    <p>
                        {this.props.data.desc}
                    </p>
                </div>
            </figure>
        )
    }
}
export default ImgFigure;
